<template>
  <div class="container">
    <toolbar :back="true" :title="sortVo.sortName"></toolbar>
    <div class="t-container">
      <scroll :data="data" :loading="false" @loadMore="loadMore">
        <search-box :searchData="search" @updateSearch="updateSearch"></search-box>
        <book-list :bookList="data"></book-list>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar"
import Scroll from 'components/Scroll'
import SearchBox from './components/SearchBox'

import BookList from '../../components/BookList'

import {getSortById} from 'api/SortApi'
import {getBooksList} from 'api/BooksApi'

export default {
  name: 'BooksList',
  components: {
    Toolbar,
    Scroll,
    SearchBox,
    BookList
  },
  data () {
    return {
      data: [],
      showSearchBox: true,
      search: {
        scrollId: '',
        sortId: 0,
        childSortId: ''
      },
      sortVo: {},
      tmp: []
    }
  },
  methods: {
    loadMore (currentIndex, $scroll) {
      this.getBooksList()

      if(this.tmp.length == 0)
        $scroll.forceUpdate()

    },
    updateSearch (search) {
      this.search.childSortId = search.childSortId
      this.search.isOver = search.isOver
      this.search.scrollId = ""

      this.data = []

      this.getBooksList()
    },
    getBooksList () {
      this.tmp = []
      getBooksList (this.search)
        .then(res => {
          if(res.meta.success) {
            this.tmp = res.data.data
            this.data = this.data.concat(this.tmp);
            this.search.scrollId = res.data.pagination.scrollId
          }
        });
    },
    getSortById () {
      getSortById ({
        id: this.search.sortId
      }).then(res => {
        if(res.meta.success) {
          this.sortVo = res.data
        }
      });
    }
  },
  created () {
    this.search.sortId = this.$route.params.sortId
    this.search.childSortId = this.$route.params.childId
    this.getBooksList();
    this.getSortById()
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

</style>
